window.addEventListener("load", function() {
    /* 
    需求确定:
     1.点击搜索按钮 获取输入框的内容  并把这个内容存储在本地
     2.将本地数据存储的内容渲染到ul里面
     3.点击清除按钮 清除所有的本地数据 
    */
    /* 
    功能1：
     1.先获取搜索按钮以及input输入框
     2.给搜索按钮绑定点击事件
     3.在点击事件里面获取输入框inout的内容
     4.将内容存储到本地
    */

    // 01.获取相应的标签
    let inp = this.document.querySelector("input") //input输入框
    let sechBtn = this.document.querySelector(".sechBtn") //搜索按钮
    let ul = this.document.querySelector(".list")
    console.log(inp, sechBtn, ul);

    // 02.给搜索按钮绑定点击事件
    sechBtn.addEventListener("click", function() {
        // 03.在点击事件里面 获取输入框的内容
        let txtInp = inp.value
            // 04.将获取到数据存在本地
            // 04.1如果本地存储里面有数据 将本地存储的数据取出来  再把新数据加进去 再存储
        let data = JSON.parse(localStorage.getItem("localData"))
        console.log(data);
        // 04.1.2如果data 不为空   就代表本地存储有数据
        if (data !== null) {
            // 那就把data的值给到arr
            let arr = data
                // 把新搜索的内容 添加到数组中
            arr.unshift(txtInp)
                // 最后把数组存在本地  -----转字符串对象存
            localStorage.setItem("localData", JSON.stringify(arr))
            ranD()
        } else {
            // 04.1.3如果data 为空 就代表本地本地存储没数据 就声明一个新的数组
            let arr = []
                // 将输入框的内容 添加到数组
            arr.unshift(txtInp)
                // 将数组存储到本地  ---转字符串对象存
            localStorage.setItem("localData", JSON.stringify(arr))
            ranD()
        }
        // 05.清空搜索框
        inp.value = ""
    })


    // 封装渲染数据函数
    /* 
    功能2：
    1.将本地存储的数据取出来
    2.将数据进行遍历
    3.获取ul
    4.再把遍历的内容进行拼接
    */

    function ranD() {
        // 声明一个变量  为空的字符串
        let strHtml = ""
            // 获取本地存储的内容
        let data = JSON.parse(localStorage.getItem("localData"))
            // 将获取到的内容进行遍历
        data.forEach(function(v) {
            // 把遍历的数据进行拼接
            strHtml += `<li>${v}</li>`
                // 把拼接完数据给到ul 当做内容
            ul.innerHTML = strHtml
        })
    }


    /* 
    功能3：
    1.先获取清空的按钮
    2.给清空的按钮 绑定点击事件
    3.在点击事件里面 清除本地存储 以及ul的内容
    */
    // 1.先获取清空的按钮
    let clearBtn = this.document.querySelector(".clearBtn")
    console.log(clearBtn);
    // 2.给清空的按钮 绑定点击事件
    clearBtn.addEventListener("click", function() {
        // 3.清除本地存储 以及ul的内容
        localStorage.clear()
        ul.textContent = ""
    })


    // 本地存储有内容那就直接渲染
    if (!(this.localStorage.getItem("localData") == null)) {
        ranD()
    }


})